<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>边框动效按钮</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn60 {
            width: 124px;
            height: 50px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .3s linear;
        }

        .btn60:after {
            content: attr(data-text);
            position: relative;
        }

        .border-tb-60:before {
            content: '';
            width: 0;
            height: 3px;
            background-color: black;
            position: absolute;
            top: 0;
            left: 0;
        }

        .border-tb-60:after {
            content: '';
            width: 0;
            height: 3px;
            background-color: black;
            position: absolute;
            top: 47px;
            right: 0;
        }

        .border-lr-60:before {
            content: '';
            width: 3px;
            height: 0;
            background-color: black;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .border-lr-60:after {
            content: '';
            width: 3px;
            height: 0;
            background-color: black;
            position: absolute;
            top: 0;
            left: 121px;
        }

        .btn60:hover {
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        }

        .btn60:hover .border-tb-60:before,
        .btn60:hover .border-tb-60:after {
            animation: eff60 .3s linear forwards;
        }

        .btn60:hover .border-lr-60:before,
        .btn60:hover .border-lr-60:after {
            animation: eff601 .3s linear forwards;
        }

        @keyframes eff60 {
            to {
                width: 100%;
            }
        }

        @keyframes eff601 {
            to {
                height: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="btn60" data-text="更多详情">
            <div class="border-tb-60"></div>
            <div class="border-lr-60"></div>
        </div>
    </div>
</body>

</html>